<script setup>
import axios from 'axios';
import RolAdd from '@/components/app/RolAdd.vue';
import { onMounted, reactive, ref } from 'vue';
import { showMsg,showDialog } from '@/components/Util';

let title = ref('添加菜单');
let list = ref([]);
function getData(){
    axios.get('/api/role_list').then(res =>{
        console.log(res);
        if(res.data.status==200){
            list.value =changeData(res.data.data);
        }else{
            showMsg("获取数据失败",'error',2000);
        }
    })
}
function changeData(arr){
    let res = {};
    for(let i=0;i<arr.length;i++){
        if(arr[i].id in res){
            res[arr[i].id].remark += ','+arr[i].remark;
        }else{
            res[arr[i].id] = arr[i]
        }
    }
    return res;
}
function newRole(){
    addshow.value=false;
    getData();
}
function del(id){
    showDialog({msg:'确认删除?'}).then(res=>{
        axios.delete('/api/role_delete/'+id).then(res=>{
            console.log(res);
            if(res.data.status==200){
                getData();
            }else{
                showMsg(res.data.msg,'info',2000);
            }
        })
    })
}

function edit(id){
    //显示表单窗口
    //显示数据到窗口
   addshow.value = true;
   //list [{},{}]
   let obj = list.value[id]
   console.log(role);
   role.value = obj;
   optype.value = 'edit';
   title.value="修改角色"

}
let role = ref({id:'',roleName:'',roleRemark:'',permitId:''})
let optype = ref('new')
let addshow=ref(false);
onMounted(() =>{
    getData();
})
function news(){
    addshow.value=true;
    title.value="添加角色";
}


</script>
<template>
    <RolAdd :title="title"  :type="optype" :role="role" v-show="addshow" @submit="newRole" @close="addshow=false"></RolAdd>
    <div class="page">
        <div class="tool">
            <button @click="news">添加</button>
        </div>
        <ul class="list">
            <li class="list1">
                <span>角色</span>
                <span>角色描述</span>
                <span>角色权限</span>
                <span>按钮</span>
            </li>
            <li class="item" v-for="item in list" :key="item.id">
                <span>{{ item.roleName }}</span>
                <span>{{ item.roleRemark }}</span>
                <span :title="item.remark">{{ item.remark }}</span>
                <span class="anniu">
                    <button @click="del(item.id)" class="ss">删除</button>
                    <button @click="edit(item.id)" class="ss">修改</button>
                </span>
            </li>
        </ul>
    </div>
</template>
<style scoped>
.list{
    margin-bottom: 20px;
    padding: 0;
    box-sizing: border-box;
    height: 200px;
    width: 70%;
}
.list1{
    height: 50px;
    background-color:rgb(255, 80, 0) ;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    list-style: none;
}
.list1>span{
    display: flex;
    justify-content: center;
    align-items: center;
}
.list>li{
    display: grid;
    grid-template-columns:repeat(4,1fr);
}
.item span{
    height: 50px;
    display: flex;
    justify-content: center;
    /* text-align: center; */
    padding-top: 30px;
}
.item>span:nth-child(3){
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.item button{
    width: 50px;
    height: 25px;
}
span{
    border: #049b82 1px solid;
}
.it{
    display: flex;
}
</style>